<template>
  <div class="review-bar">
    <div class="review-bar-chart">
      <VptBar :width="width"
              :height="height"
              :chartData="list"
              autoRander
              :xAxisData="xData"
              v-bind="barProps"
              :barWidth="20"></VptBar>
    </div>
  </div>
</template>

<script setup>
import VptBar from "./vpt-bar.vue";
import { fontSize } from "@/utils/rem/rem.js";
import { computed } from "vue";

const props = defineProps({
  userChartData: { type: Array, default: () => [] },
  barData: { type: Array, default: () => [] },
  // 是否为横屏
  isLandscape: { type: Boolean, default: false },
  width: { type: String, default: "7.76rem" },
  height: { type: String, default: "1.2rem" },
});

const list = computed(() => {
  return props.userChartData.length
    ? [props.userChartData.map((item) => item.know_num)]
    : [];
});

const xData = computed(() => {
  return props.userChartData.map((item) => item.top_level_name);
});

const barProps = computed(() => {
  // const otherProps = props.isLandscape ? getOtherBarProps() : {};

  return {
    titleProps: {
      text: "",
    },
    yAxisProps: {
      nameTextStyle: {
        fontSize: fontSize(14),
        color: "rgba(255,255,255, 0.5)",
        // fontFamily: "HarmonyOS_Sans",
        fontWeight: 400,
      },
    },
    grid: {
      left: fontSize(5),
      top: fontSize(8),
      bottom: fontSize(10),
    },
    color: ["#165DFF"],
    dataZoom: {
      silent: true,
      show: true,
      type: "slider",
      start: 0,
      end: 100,
      bottom: 10,
      height: 1,
      handleSize: "1000%",
      handleStyle: {
        color: "#838B97",
        shadowColor: "#838B97",
      },
      textStyle: {
        color: "#fff",
      },
      borderColor: "red",
      backgroundColor: "#838B97",
      fillerColor: "#838B97",
      dataBackgroundColor: {
        lineStyle: { color: "#318a2f" },
        areaStyle: {
          shadowBlur: 10,
        },
      },
      brushStyle: { shadowColor: "#838B97" },
    },
    // ...otherProps
  };
});

const getOtherBarProps = () => {
  return {
    grid: {
      left: fontSize(5),
      top: fontSize(40),
      bottom: fontSize(20),
    },
    titleFontSize: 14,
    xAxisLabelFontSize: 14,
    yAxisLabelFontSize: 14,
    barWidth: 20,
  };
};
</script>

<style lang="less" scoped>
.review-bar {
  display: flex;
  flex-direction: column;
  height: 100%;
  // padding: 0.12rem 0.16rem;
  padding-left: 0.12rem;
  box-sizing: border-box;

  .review-bar-chart {
    flex: 1;
    height: 0;
  }
}
</style>
